<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
    </el-dialog>
    <quill-editor ref="myTextEditor"
                v-model="content"
                :config="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
                @change="onEditorChange($event)">
    </quill-editor>
  <el-button type="primary" @click="handlerSubmit">确认</el-button>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' //调用编辑器
export default {
    data () {
        return {
            content: '<h2>I am Example</h2>',
            editorOption: {
            // something config
                modules:{
                    toolbar:[
                        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                        ['blockquote', 'code-block']
                    ]
                }
            },        
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
            }
    },
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
        handlerSubmit() {
            // 获取富文本的信息
            let quill = this.$refs.myTextEditor
            console.log(quill);
            console.log(this.content);
        },
        onEditorBlur(editor) {
        console.log('editor blur!', editor)
        },
        onEditorFocus(editor) {
        // console.log('editor focus!', editor)
        },
        onEditorReady(editor) {
        // console.log('editor ready!', editor)
        },
        onEditorChange({ editor, html, text }) {
        // console.log('editor change!', editor, html, text)
        this.content = html
        }
    },
    // if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
    // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
    computed: {
        editor() {
        return this.$refs.myTextEditor.quillEditor
        }
    },
    mounted() {
        // you can use current editor object to do something(editor methods)
        console.log('this is my editor', this.editor)
        // this.editor to do something...
    },
    components: {
        quillEditor
    }
}
</script>

<style lang="scss" scoped>
.quill-editor{
    width: 800px;
}
</style>
